<template>
	<view class="page">
		<view class="page_header">
			<navigation textAlign="left">伊滨区养老服务平台</navigation>
			<view class="page_header_search_panel">
				<image class="page_header_search_icon" src="https://images-vx.oss-cn-beijing.aliyuncs.com/images-vx/search.png" mode="aspectFit"></image>
				<input class="page_header_search_input" v-model="searchModel.search" @confirm="reset" type="text" value="" placeholder="请输入订单编号或者订单名称" placeholder-class="page_header_search_placeholder" />
			</view>
			<view class="page_title">最新订单</view>
		</view>
		<scroll-view scroll-y="true" class="page_scroll" scroll-with-animation="true" enable-back-to-top="true" @scrolltolower="scrollBottom" :lower-threshold="100">
			<view class="card_panel">
				<view class="card_item" v-for="(item,index) in orderList" :key="index" @tap="toDetail(item)">
					<view class="card_header">
						<view class="header_left">
							{{item.name}}
							<view class="sign green" v-if="item.zhengce == $enums['服务政策']['公益']">公益</view>
							<view class="sign orange" v-if="item.zhengce == $enums['服务政策']['常规']">常规</view>
						</view>
						<view class="header_right">{{item.serviceStartTime | toDate('MM月dd日') || '--'}}</view>
					</view>
					<view class="card_container">
						<view class="name">{{item.username}} &nbsp; {{item.phone}}</view>
						<view class="time">{{item.serviceStartTime | toDate('hh:mm') || '--'}}</view>
					</view>
					<view class="card_footer">
						<text class="nursing-icon iconyemian"></text>
						<view class="text">{{item.address}}</view>
					</view>
				</view>
			</view>
			<view class="no-data">
				<view class="more"><uni-load-more :status="moreStatus" :content-text="moreContentText" iconType="spinner" color="#666666"></uni-load-more></view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import * as serveApi from '@/api/orgApi/serve.js';
	import { uniLoadMore } from '@dcloudio/uni-ui';
	export default {
		data() {
			return {
				enums: this.$enums,
				orderList: [],
				searchModel:{
					search: '',
					size: 10,
					current: 1, 
					status: this.$enums['机构订单状态']['待服务']
				},
				// more
				moreStatus: 'more',
				moreContentText: {
					// 加载各状态文字说明。
					contentdown: '加载更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多了'
				},
			};
		},
		methods: {
			toDetail(data) {
				uni.navigateTo({
					url: `/pages/orgPage/serve/orderDetail/orderDetail?id=${data.id}`
				});
			},
			reset(){
				this.searchModel.current = 1;
				this.getOrderList();
			},
			getOrderList() {
				this.moreStatus = 'loading';
				serveApi.queryOrder(this.searchModel).then(res => {
					if (res.code === 0) {
						if (this.searchModel.current == 1) {
							this.orderList = [];
						}
						if (res.data && res.data.length == 10) {
							this.moreStatus = 'more';
							this.searchModel.current += 1;
							this.orderList = [...this.orderList, ...res.data];
						} else if (res.data && res.data.length < 10) {
							this.moreStatus = 'noMore';
							this.searchModel.current += 1;
							this.orderList = [...this.orderList, ...res.data];
						} else {
							this.moreStatus = 'noMore';
						}
					}
				}).catch((e)=>{
					uni.showToast({
						title: e.msg,
						icon: 'none',
						duration: 1000
					});
				});
			},
			// 滑动到底部。分页处理
			scrollBottom() {
				this.getOrderList();
			},
		}
	}
</script>

<style lang="stylus" scoped>
	.page {
		background-color rgba(244, 247, 249, 1);
	}

	.page_title {
		padding 0rpx 50rpx;
		box-sizing border-box;
		height 100rpx;
		display flex;
		align-items center;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		position relative;

		&::before {
			content '';
			position absolute;
			top 38rpx;
			bottom 38rpx;
			width 6rpx;
			background-color #FFFFFF;
			left 30rpx;
			border-radius: 3rpx;
		}
	}

	.page_scroll {
		position absolute;
		top calc(288rpx + var(--status-bar-height));
		right 0rpx;
		bottom 0rpx;
		left 0rpx;
	}

	.card_panel {
		width 100%;
		padding 0rpx 30rpx;
		box-sizing border-box;

		.card_item {
			background: #FFFFFF;
			box-shadow: 0rpx 1rpx 32rpx 0rpx rgba(45, 82, 101, 0.06);
			border-radius: 20rpx;
			padding 20rpx 30rpx;
			box-sizing border-box;
			margin-bottom 20rpx;

			.card_header {
				display flex;
				align-items center;
				justify-content space-between;

				.header_left {
					display flex;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;

					.sign {
						margin-left: 10rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						padding: 4rpx;
						border-radius: 8rpx;
						transform: scale(0.7);
					}

					.green {
						background-color: rgba(0, 181, 0, 1);
					}

					.orange {
						background-color: rgba(246, 132, 21, 1);
					}
				}

				.header_right {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}

			.card_container {
				display flex;
				justify-items flex-start;
				justify-content space-between;

				.name {
					padding-top 35rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #666666;
				}

				.time {
					padding-top 15rpx;
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}

			.card_footer {
				width 100%;
				margin-top 20rpx;
				padding 8rpx 20rpx 9rpx 20rpx;
				box-sizing border-box;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FB7B22;
				background: #FFF7F2;
				border-radius: 4px;
				display flex;
				align-items center;

				.nursing-icon {
					margin-right 5rpx;
					font-size: 22rpx;
				}

				.text {
					width 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box; //将对象作为弹性伸缩盒子模型显示。
					-webkit-box-orient: vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
					-webkit-line-clamp: 1; //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。此处为2行
					word-wrap: break-word;
				}
			}
		}
	}
</style>
